<template>
    <div class="my-count">
        <header>
            <dl>
                <dd>
                    <img src="~assets/img/car/logo.png" alt="">
                </dd>
                <dd>
                    <h1>
                        {{info.integral}}
                    </h1>
                </dd>
                <dd>
                    <p>
                        我的积分
                    </p>
                </dd>
            </dl>
        </header>
        <section>
            <ul class="header">
                <li>
                    <img src="~assets/img/car/star_blue.png" alt="">
                    <div>赚取积分</div>
                </li>
                <li class="count-control">
                    <img src="~assets/img/car/text.png" alt="">
                    <div>积分规则</div>
                </li>
                <li @click="locationHref('/home/main')">
                    <img src="~assets/img/car/open.png" alt="">
                    <div>积分兑换</div>
                </li>
            </ul> 
            <div class="count-list">
                <h3>积分排行榜</h3>
                <ul>
                    <li v-for="(item,index) in list">
                        <span>{{index + 1}}</span>
                        <img :src="item.avatar" alt="">
                        <dl>
                            <dt>{{item.name}}</dt>
                            <dd>{{item.integral}}分</dd>   
                        </dl>
                        <!--<div>
                            <img src="~assets/img/car/up.png" alt="">
                            <div>102</div>
                        </div>-->
                    </li>    
                </ul> 
            </div>
        </section>
        <div class="mb">
            <div class="back_blue">
                <img class="close" src="~assets/img/car/close.png" alt="">
                <h2>·&nbsp;&nbsp;&nbsp;积分规则&nbsp;&nbsp;&nbsp;·</h2>
                <div v-html="config.integral"></div>
                <!--<dl>
                    <dt>
                        <h3>活动时间:</h3>
                    </dt>
                    <dd>
                        <p>2014年7月25日-9月4日</p>
                    </dd>
                    <dt>
                        <h3>活动说明:</h3>
                    </dt>
                    <dd>
                        <p>2016年1月11日-2016年1月24日期间，每位客户限抽1次</p>
                    </dd>
                    <dd>
                        <p>2、实物奖品抽中后，我们将为您免费配送至所选体验馆；到货后请凭中奖手机号（带手机）到店自提。在接到领奖通知次日起，7天内未领取的，直接取消领奖资格，实物奖品不退换、不补件。</p>
                    </dd>
                    <dd>
                        <p>3、红包奖品发放：抽中红包后，红包序列号将以短信形式发送至手机，请注意查收。</p>
                    </dd>
                    <dt>
                        <h3>领奖提示:</h3>
                    </dt>
                    <dd>
                        <p>满减及包送包安装开启时间：2016年1月16日</p>
                    </dd>
                </dl>-->
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default {
        name:'my-count',

        data() {
            return {
                info: {},
                list: [],
                banner: [],
                demoEvents: [],
                config:{ }
            }
        },

        components:{
            
        },

        mounted() {                
            $('.count-control').click(() => {
                $('.mb').fadeIn();
            });
            $('.mb').click(e => {
                $('.mb').fadeOut();
            });
            $('.close').click(e => {
                $('.mb').fadeOut();
            });
            $('.back_blue').click(e => {
                e.stopPropagation();
            })

            //获取我的积分、积分前十名、积分规则
            this.axios.get('user_info', {params:{
                id: localStorage.id
            }}).then(data => {
                if (data.status == 200) {
                    this.info = data.data;
                } else {
                    this.$toast('服务器异常，请重试');
                }
            })

            this.axios.get('rank_list').then(data => {
                if (data.status == 200) {
                    this.list = data.data;
                } else {
                    this.$toast('服务器异常，请重试');
                }
            })

            this.axios.get('integral_config').then(data => {
                if (data.status == 200) {
                    this.config = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })
        },

        beforeUpdate () {

        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .my-count {
        background: url('../../../assets/img/car/car-back.png') 0 0 no-repeat;
        background-size: cover;
        min-height: 100vh;
        header {
            position: relative;
            padding: .1rem .4rem;
            dl {
                position: relative;
                z-index: 2;
                text-align: center;
                color: #fff;
                img {
                    width: .9rem;
                }
                > :first-child {
                    text-align: right;
                }
                dd {
                    margin-bottom: .3rem;
                    h1 {
                        font-size: 1rem;
                    }
                    p {
                        color: rgba(255,255,255,.8);
                        font-size: .36rem;
                        letter-spacing: .8em;
                    }
                }
            }
        }
        section {
            padding: .4rem;
            .header {
                padding: .35rem .46rem .2rem .46rem;
                margin-bottom: .5rem;
                background: #151719;
                .bor(10px);
                .flex-between;
                font-size: .28rem;
                text-align: center;
                li {
                    color: #7C7C7C;
                    img {
                        margin-bottom: .2rem;
                    }
                }
                > :first-child {
                    color: @blue;
                }
            }
            .count-list {
                padding: .4rem;
                background: #151719;
                .bor(10px);
                color: #7C7C7C;
                font-size: .28rem;
                ul {
                    max-height: 43vh;
                    overflow: auto;
                    li {
                        .flex-left;
                        margin: .55rem 0;
                        div {
                            font-size: .26rem;
                            img {
                                margin-bottom: .1rem;
                            }
                        }
                        > img {
                            width: .8rem;
                            height: .8rem;
                            border-radius: 100%;
                            border: 2px solid #777676;
                            margin: 0 .45rem;
                        }
                        dl {
                            dt {
                                margin-bottom: .3rem;
                            }
                        }
                    }
                }
            }
        }
        .mb {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 5;
            display: none;
            .back_blue {
                position: absolute;
                left:50%;
                top: 5%;
                width: 90%;
                background: #1660BD;
                color: #fff;
                padding: .4rem;
                .bor(10px);
                .box-sizing;
                .translate(-50%,0);
                font-size: .28rem;
                img {
                    position: absolute;
                    right: .4rem;
                    top: .4rem;
                }
                h2 {
                    font-size: .32rem;
                    text-align: center;
                    margin-bottom: .5rem;
                }
                // h3 {
                //     font-size: .3rem;
                // }
                // dl {
                //     dd,dt {
                //         line-height: 1.8;
                //     }
                // }
            }
        }
    }
</style>